<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
        <h1>
          全选：<input type="checkbox" @change="selAll" v-model="checkAll" > <button @click="fan">反选</button>
        </h1>
        <hr>
        <ul>
          <li v-for="item in list" :key="item.id">
            <input @change="isCheckAll(item)"  type="checkbox" :checked="item.checked"  />
            <span>{{item.name}}</span>
          </li>
        </ul>


  </div>
   <script src="./vue.js"></script>
   <script> 
           new Vue({
            el:"#app",
            data(){
              return {
                checkAll:false,//收集全选的数据
                list:[
                  {id:1,name:"孙悟空",checked:false},
                  {id:2,name:"猪八戒",checked:false},
                  {id:3,name:"沙僧",checked:false},
                  {id:4,name:"唐僧",checked:false}
                ]
              }
            },
            methods:{
                selAll(){ //change事件 完成全选反选
                   this.list.map(item=>{
                      item.checked=this.checkAll; //让数据每项等于全选的值
                      return item
                  })
              },
              fan(){ //反选
                this.list.map(item=>{
                    item.checked=false; //反选
                    return item
                 })
              },
              isCheckAll(item){ //判断是否全选
                  item.checked=!item.checked;
                  // every 所有条件为true才返回true 否则返回false
                this.checkAll= this.list.every(item=>item.checked==true)
           
              }
            },
            watch:{
              // checkAll(newVal,oldVal){ //监听全选的状态变化
              //   this.list.map(item=>{
              //         if(newVal){
              //           item.checked=true;
              //         }else{
              //           item.checked=false;
              //         }
              //         return item
              //    })
              // }
            }
           })
   </script>
</body>
</html>